import { HsAdminSpin } from '@hs-admin/base-components'
import { useEffect, useState } from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
import { Flex } from 'antd'
import { IndustryChainList } from '@/api/IndustryChain'

const List = () => {
  const [items, setItems] = useState<any[]>([])
  const [pagination, setpagination] = useState({
    current: 1,
    pageSize: 20
  })
  const [hasMore, setHasMore] = useState(false)

  const fetchData = () => {
    setpagination({
      current: pagination.current + 1,
      pageSize: 20
    })
  }

  const doRequest = () => {
    return IndustryChainList({
      page: pagination.current,
      page_size: pagination.pageSize,
      keywords: null,
      hs_ind_list: {
        column: 'hs_ind_list',
        values: []
      },
      trade_plate: null,
      company_type: null,
      time_scope: {
        start_time: null,
        end_time: null
      },
      qualified: null,
      financing_round: null,
      pca: {
        province_column: 'province_code',
        city_column: 'city_code',
        area_column: 'area_code',
        values: []
      },
      sort: {
        founding_date: null
      }
    }).then((res) => {
      if (pagination.current === 1) {
        setItems(res.items)
      } else {
        setItems([...items, ...res.items])
      }
      if (res.total > pagination.current * pagination.pageSize) {
        setHasMore(true)
      } else {
        setHasMore(false)
      }
    })
  }

  useEffect(() => {
    doRequest()
  }, [pagination])

  return (
    <div id="scrollableDiv" className="h-60 overflow-auto" style={{ background: 'green' }}>
      <InfiniteScroll
        dataLength={items.length} //This is important field to render the next data
        next={fetchData}
        hasMore={hasMore}
        loader={<HsAdminSpin />}
        scrollableTarget="scrollableDiv">
        {items.map((item) => (
          <Flex key={item.id} gap={'large'} className="white">
            <div>{item.company_name}</div>
            <p>{item.company_code}</p>
          </Flex>
        ))}
      </InfiniteScroll>
    </div>
  )
}

export default List
